<template>
  <Container class="brand-list">
    <HeadFormItem
      slot="header"
      :list="list"
      @onSearchBtnClick="onSearchBtnClick"
    />
    <Tabs v-model="tab">
      <Button
        size="large"
        class="item"
        type="primary"
        slot="extra"
        icon="md-add"
        @click="onAddType"
      >签约业务员</Button>
      <Button slot="extra" size="large" :disabled='!ids.length' class="mr" @click="onBatchCheck">批量审核</Button>
      <TabPane label="经销商业务员管理" name="tab1">
        <Table
          :height="options.tableHeight"
          stripe
          :columns="list.columns"
          :data="list.data"
          @on-selection-change="onSelectChange"
          no-data-text="亲，没有找到相关记录哦！~"
        ></Table>
        <div class="pager">
          <Page
            :total="list.totalItem"
            :current="list.currentPage"
            :page-size="list.pageSize"
            @on-change="onPageChange"
            @on-page-size-change="onPageSizeChange"
            show-sizer
            placement="top"
          ></Page>
        </div>
        <Loader :status="list.status" @refresh="getData"></Loader>
      </TabPane>
    </Tabs>
    <DealersModelEdit ref="checkModal" @complete="getData"></DealersModelEdit>
  </Container>
</template>
<script>
import table from "@/table";
import DealersListData from "./list/dealersListData";
import HeadFormItem from './list/HeadFormItem'
import CategorySelect from "@/components/CategorySelect";
import BrandSelect from "@/components/BrandSelect";
import DealersModelEdit from "./edit/DealersModelEdit";
import { clearEmpty } from "@/util";
export default {
  name: 'setting/dealers/list',
  components: {
    CategorySelect,
    BrandSelect,
    DealersModelEdit,
    HeadFormItem
  },
  data() {
    return {
      radio: "yes",
      tab: "tab1",
      typeId: "",
      list: DealersListData,
      options: {
        tableHeight: 300
      },
      ids: []
    };
  },
  mounted() {
    this.list.currentPage = ~~this.$route.query.currentPage || 1;
    this.list.pageSize = ~~this.$route.query.pageSize || this.list.pageSize;
    this.initTable();
    this.$bus.$on("onAddSalesman", this.onAddSalesman);
    this.$bus.$on("onEdit", this.onEdit);
    this.$bus.$on("onSign", this.onSign);
    this.$bus.$on("onUnsign", this.onUnsign);
    this.$bus.$on("onCheck", this.onCheck);

    this.getData();
  },
  destroyed() {
    this.$bus.$off();
  },
  methods: {
    ...table,
    onSearchBtnClick() {
      this.list.currentPage = 1;
      this.getData();
    },
    getData() {
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        name: this.keyword,
        ...this.list.form
      }
      param = clearEmpty(param);
      this.list.status = "loading";
      this.$jsonPost("/distributor_salesman/page", param)
        .then(data => {
          this.list.data = [];
          this.list.totalItem = Number(data.total);
          this.list.data = (data.records || [])
          this.list.status = "pass";
          this.backTableTop();
        })
        .catch(() => {
          this.list.status = "error";
        });
    },
    onAddType() {
      this.$router.push("/setting/dealers/edit");
    },
    onEdit(id) {
      this.$router.push({
        path:'/setting/dealers/edit',
        query:{id}
      });
    },
    onSign(row) {
      this.$router.push({
        path:'/setting/dealers/edit',
        query: {
          id: row.id
        }
      });
    },
    onUnsign(row) {
      this.$Modal.confirm({
        title: "解约",
        content: "确定要解约吗？",
        onOk: () => {
          let params = {
            contractId: row.id
          }
          this.$ajaxGet("/distributor_salesman/discontract", params).then(() => {
            this.$Notice.success({
              title: "解约成功"
            });
            this.getData();
          });
        }
      });
    },
    onCheck(row) {
      this.$refs.checkModal.openModal(row);
    },
    onSelectChange(selection) {
      this.ids = selection;
    },
    //批量审核
    onBatchCheck() {
      let ids = this.ids
      let item = this.ids.find(item => item.auditStatus == 2 || item.auditStatus == 1)
      if (item) {
        this.$Message.warning('只能选择待审核状态数据')
        return
      }
      this.onCheck(ids)
    },
    onPageChange(number) {
      this.list.currentPage = number;
      this.$router.push({
        // name: "product/tag/list",
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      });
      this.getData();
    },
     onPageSizeChange(pageSize) {
      this.list.currentPage = 1
      this.list.pageSize = pageSize
      this.$router.push({
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      })
      this.getData()
    }
  },
  watch: {
    $route() {
      let page = ~~this.$route.query.currentPage;
      let table = this.list;
      if (table.currentPage !== page) {
        table.currentPage =
          ~~this.$route.query.currentPage === 0
            ? 1
            : ~~this.$route.query.currentPage;
        this.getData();
      }
    }
  }
};
</script>
